<template>
  <div class="component-base-config">
    <div
      class="content-pad-item__title with-tag"
      :class="{ 'is-open': titleContentVisible }"
      @click.stop="changeVisible"
    >
      标题与单位
    </div>
    <el-collapse-transition>
      <div v-show="titleContentVisible">
        <div class="content-pad-row">
          <div class="row-grid">
            <p>显示标题</p>
            <el-switch v-model="titleConfig.titleVisible" />
          </div>
        </div>
        <el-collapse-transition>
          <div v-show="titleConfig.titleVisible">
            <div class="content-pad-row">
              <div class="row-grid">
                <p>标题</p>
                <el-input v-model="titleConfig.titleContent" :maxlength="20" />
              </div>
            </div>
            <div class="content-pad-row">
              <div class="row-grid">
                <p>字体</p>
                <el-color-picker v-model="titleConfig.titleColor" />
                <el-button
                  :type="titleConfig.titleBold ? 'primary' : 'default'"
                  icon="ri-bold"
                  style="margin-left: 8px"
                  @click="changeTitleBold"
                />
                <el-button
                  :type="titleConfig.titleItalic ? 'primary' : 'default'"
                  icon="ri-italic"
                  @click="changeTitleItalic"
                />
                <el-input-number
                  v-model="titleConfig.titleSize"
                  :step="1"
                  :min="12"
                  controls-position="right"
                  style="margin-left: 8px"
                />
              </div>
            </div>
          </div>
        </el-collapse-transition>
        <div class="content-pad-row">
          <div class="row-grid">
            <p>显示单位</p>
            <el-switch v-model="titleConfig.unitVisible" />
          </div>
        </div>
        <el-collapse-transition>
          <div v-show="titleConfig.unitVisible">
            <div class="content-pad-row">
              <div class="row-grid">
                <p>单位</p>
                <el-input v-model="titleConfig.unitContent" :maxlength="6" />
              </div>
            </div>
            <div class="content-pad-row" v-show="titleConfig.unitVisible">
              <div class="row-grid">
                <p>字体</p>
                <el-color-picker v-model="titleConfig.unitColor" />
                <el-button
                  :type="titleConfig.unitBold ? 'primary' : 'default'"
                  icon="ri-bold"
                  style="margin-left: 8px"
                  @click="changeUnitBold"
                />
                <el-button
                  :type="titleConfig.unitItalic ? 'primary' : 'default'"
                  icon="ri-italic"
                  @click="changeUnitItalic"
                />
                <el-input-number
                  v-model="titleConfig.unitSize"
                  :step="1"
                  :min="12"
                  controls-position="right"
                  style="margin-left: 8px"
                />
              </div>
            </div>
          </div>
        </el-collapse-transition>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import { objectDeepClone } from '../../../untils/commonUtils';
import { titleConfig}  from '../../../data/defaultConfig';
export default {
  name: 'MTitleConfig',
  data(){
    return{
      titleContentVisible:false,
      titleConfig: titleConfig
    }
  },
  created(){
    console.log("title:",this.titleConfig);
  },
  computed: { 
    acComponent(){
      return this.$store.state.imageDragMoudules.acComponent;
    },
    acComponentId(){
      return this.$store.state.imageDragMoudules.acComponent.id;
    }
  },
  methods:{
    changeVisible(){
      this.titleContentVisible = !this.titleContentVisible;
    },
    changeTitleBold(){
      this.titleConfig.titleBold = !this.titleConfig.titleBold
    },
    changeTitleItalic(){
      this.titleConfig.titleItalic = !this.titleConfig.titleItalic
    },
    changeUnitBold(){
      this.titleConfig.unitBold = !this.titleConfig.unitBold;
    },
    changeUnitItalic(){
      this.titleConfig.unitItalic = !this.titleConfig.unitItalic
    }
  },
  watch:{
    acComponentId:{
      handler(newVal, oldVal) {
        console.log("点击：",newVal);
        this.titleContentVisible = true;
        !!newVal && objectDeepClone( this.titleConfig, this.acComponent.titleConfig);
      },
      deep: true,
      immediate: true
    },
    titleConfig:{
      handler(newVal, oldVal) {
        console.log("点击：",newVal);
        this.$store.commit('updateComponent', {
          newState: this.titleConfig,
          key: 'titleConfig',
        });
      },
      deep: true,
      immediate: true
    }
  }
}
</script>